{% extends "base.html" %}
{% block title %}Book Appointment - AI Legal Assistant{% endblock %}

{% block content %}
<div class="container" style="max-width:700px;">
    <a href="/client/dashboard" class="btn btn-outline btn-sm" style="margin-bottom:1.5rem;"><i class="fas fa-arrow-left"></i> Back</a>

    <h1 class="page-title"><i class="fas fa-calendar-plus"></i> Book Appointment</h1>
    <p class="page-subtitle">Schedule a consultation with {{ lawyer.name }}</p>

    <!-- Lawyer Summary Card -->
    <div class="card" style="margin-bottom:1.5rem;">
        <div class="card-body" style="display:flex;gap:1.5rem;align-items:flex-start;flex-wrap:wrap;">
            <div style="background:var(--ink);color:#fff;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;flex-shrink:0;">
                <i class="fas fa-user-tie"></i>
            </div>
            <div style="flex:1;">
                <h3 style="color:var(--primary);">{{ lawyer.name }}</h3>
                <p style="color:var(--text-muted);font-size:0.9rem;">{{ lawyer.law_firm_name }}</p>
                <div style="display:flex;flex-wrap:wrap;gap:0.75rem;margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);">
                    <span><i class="fas fa-map-marker-alt"></i> {{ lawyer.city }}</span>
                    <span><i class="fas fa-star" style="color:var(--accent);"></i> {{ lawyer.rating }}/5</span>
                    <span><i class="fas fa-briefcase"></i> {{ lawyer.experience_years }} years exp</span>
                    <span><i class="fas fa-money-bill"></i> PKR {{ "{:,.0f}".format(lawyer.consultation_fee_pkr) }}/consultation</span>
                </div>
            </div>
            <div>
                <span class="badge badge-primary" style="font-size:0.82rem;">{{ lawyer.specialization }}</span>
            </div>
        </div>
    </div>

    <!-- Booking Form -->
    <div class="card">
        <div class="card-header"><i class="fas fa-calendar"></i> Appointment Details</div>
        <div class="card-body">
            <form method="POST" action="/client/book-appointment/{{ lawyer.id }}">
                {% if cases %}
                <div class="form-group">
                    <label class="form-label"><i class="fas fa-folder"></i> Link to Case (Optional)</label>
                    <select name="case_id" class="form-control">
                        <option value="">— No case selected —</option>
                        {% for case in cases %}
                        <option value="{{ case.id }}" {% if preselected_case_id == case.id|string %}selected{% endif %}>
                            Case #{{ case.id }} — {{ case.category or 'Unclassified' }} ({{ case.created_at.strftime('%b %d') }})
                        </option>
                        {% endfor %}
                    </select>
                </div>
                {% else %}
                <input type="hidden" name="case_id" value="">
                {% endif %}

                <div class="grid-2">
                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-calendar-day"></i> Date</label>
                        <input type="date" name="appointment_date" class="form-control" required
                               min="{{ '' }}" id="dateInput">
                    </div>
                    <div class="form-group">
                        <label class="form-label"><i class="fas fa-clock"></i> Time</label>
                        <select name="appointment_time" class="form-control" required>
                            <option value="">Select time</option>
                            {% for h in range(9, 18) %}
                            {% for m in ['00', '30'] %}
                            <option value="{{ '%02d'|format(h) }}:{{ m }}">
                                {{ '%02d'|format(h) }}:{{ m }} {% if h < 12 %}AM{% else %}PM{% endif %}
                            </option>
                            {% endfor %}
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label"><i class="fas fa-sticky-note"></i> Notes (Optional)</label>
                    <textarea name="notes" class="form-control" rows="3" placeholder="Any specific questions or concerns to discuss..."></textarea>
                </div>

                <div style="display:flex;gap:1rem;justify-content:flex-end;flex-wrap:wrap;">
                    <a href="/client/dashboard" class="btn btn-outline">Cancel</a>
                    <button type="submit" class="btn btn-accent" style="font-size:1rem;padding:0.75rem 2rem;">
                        <i class="fas fa-calendar-check"></i> Confirm Booking
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
<script>
// Set minimum date to today
const today = new Date().toISOString().split('T')[0];
document.getElementById('dateInput').min = today;
</script>
{% endblock %}